<template>
  <div class="relevant">
    <div class="tuijian">
      <h4>同类商品推荐</h4>
      <div class="main">
        <div class="zhong">
          <span @click="subFn" >👈🏻箭头</span>
           <transition name="fade">
                <ul v-show="show">

            <li @click="shuaxin(item.id)" v-for=" item in results" :key="item.id">
              <div>
                <img
                  :src="item.picture"
                  alt=""
                />
              </div>
              <p>{{item.name}}</p>
              <span> <i>￥</i>{{item.price}} </span>
            </li>

          </ul>
           </transition>

          <span @click="addFn">👉🏻箭头</span>
        </div>

      </div>
       <div class="xia">
            <span>
                <i v-for="(item,index) in parseInt (resultss.length / 4)" :key="index" :class="{'ace':index === i}" @click="dianFn(index)" class="dian"></i>

            </span>
        </div>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue-demi'
import { findRelGoods } from '@/api/category'
import { useRoute, useRouter } from 'vue-router'
export default {
  name: 'tuijian',
  setup () {
    const route = useRoute()
    const router = useRouter()
    const results = ref([])
    const resultss = ref([])
    const show = ref(true)
    findRelGoods(route.params.id).then(res => {
      console.log(res)
      resultss.value = res.result
      results.value = resultss.value.slice(i * 4, 4)
    })
    const i = ref(0)
    const dianFn = (ind) => {
      i.value = ind
    }
    // ---------------
    const subFn = () => {
      console.log(resultss.value.length / 4 - 1, 'ss')
      if (i.value < 1) {
        i.value = resultss.value.length / 4 - 1
        return
      }
      i.value--
    }
    // +++++++++++
    const addFn = () => {
      if (i.value >= resultss.value.length / 4 - 1) {
        i.value = 0
        return
      }

      i.value++
    }
    // watch==============
    watch(i, (a) => {
      show.value = false
      console.log(a)

      setTimeout(() => {
        show.value = true
        results.value = resultss.value.slice(a * 4, (a + 1) * 4)
      }, 1000)
      return results.value
    })
    const shuaxin = (id) => {
      router.push(`/category/xiangqin${id}`)
      setTimeout(() => {
        location.reload()
      }, 500)
    }
    return {
      dianFn,
      i, // ind
      subFn,
      addFn,
      results,
      resultss,
      show,
      shuaxin
    }
  }
}
</script>

<style lang="less">
.relevant {
  margin: 20px 0;
  .tuijian {
      padding: 20px  0;
    width: 1240px;
    margin: 0 auto;

    background-color: #ffffff;
  }
  // 中间了偶然
  .main {
    height: 380px;
overflow: hidden;
    .zhong {
      display: flex;
      justify-content: space-between;
      justify-items: center;
      width: 100%;
      text-align: center;
      height: 100%;
    }
    span{
 cursor:pointer;

    }
    ul {
        width: 1300px;
        overflow: hidden;
        display: flex;
      li {
        text-align: center;
        transition: all .5s;
        height: 360px;
        margin:0 30px;
        &:hover{
box-shadow:  8px -2px 8px 9px #888888;
 cursor:pointer;
        }
        div {
          width: 230px;
          height: 230px;
          padding: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
        }
        span {
          color: red;
        }
      }
    }
  }

}
.xia{
    text-align: center;
    margin-bottom: 20px;
      .dian{
          margin: 5px 10px;
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 1px solid #000;
 cursor:pointer;

      }
      .ace{
          background-color: #5ab79c;
      }
  }
  .fade-leave-from {
    opacity: 1
}
.fade-leave-active {
    transition: all .8s;
}
.fade-leave-to {
    opacity: 0
}
  .fade-enter-from {
    opacity: 0
}
.fade-enter-active {
    transition: all .8s;
}
.fade-enter-to {
    opacity: 1
}
</style>
